<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .name {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="isFlag =! isFlag">切换 flag</button>
        <!-- 我们可以将 class 设置为一个对象，对象的属性就是 class 名称，对应值是一个布尔值，为真就
        添加该 class 为假就移除该 class -->
        <h1 :class="{ name: isFlag, active: true }">具有 class 的标签</h1>

        <!-- 如果 class 已经存在，那么绑定的 class 和原来的 class 会进行合并，两者都会被保留 -->
        <h1 class="box" :class="classStr">如果人生需要四处碰壁，我希望是人民币。</h1>

        <!-- 通过对象添加 class -->
        <h1 :class="classObj">通过对象添加 class</h1>

        <!-- 通过数组添加 class -->
        <h1 :class="calssArr">通过数组添加 class</h1>

        <hr>
        <!-- ------------------ 绑定 style ------------------- -->

        <h1 :style="styleStr">拼搏到无能为力，坚持到感动自己</h1>

        <h1 v-bind:style="styleObj">通过对象添加样式</h1>

        <h1 v-bind:style="styleArr">通过数组添加样式</h1>


    </div>
</body>
<script>
    const app = {
        data() {
            return {
                isFlag: true,
                classStr: 'cell',
                classObj: {
                    active: false,
                    color: false,
                    flag: true,
                    box: true
                },
                calssArr: ['a', 'b', 'c'],
                styleStr: 'color: red',
                styleObj: {
                    color: 'blue',
                    // fontSize: '50px'
                    'font-size': '50px'
                },
                styleArr: ['color: green;', 'fontSize: 50px']
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>